<template>
	<!-- 商家信息 -->
	<view class="reaname_wp">
		<view class="reaname_item_t">
			<view class="reaname_title">
				<text>*</text>店铺滚动公告
			</view>
			<textarea value="本店主营XXX、XXX、XXX等，本店内承诺品质保障、欢迎到店体验选购！可点击右下方电话预约！" v-model="merchInfo.content"  auto-height :maxlength="-1" class="reaname_textarea"
				placeholder="内容展示在店铺详情页，填写店铺产品特色，促销信息等" />
		</view>
		
		<view class="reaname_item_t">
			<view class="reaname_title">
				店铺场景图
			</view>
			<shmily-drag-image v-model="merchInfo.thumb" :addImage="selectGallery" :number="20" :cols="4"></shmily-drag-image>
			<view class="reaname_thumb">
				<!-- <view class="t_body" v-for="(item,index) in merchInfo.thumb" :key="index" v-if="item">
					<image :src="item" ></image>
					<text @click="deleteThumb(index)">×</text>
				</view> -->
				<!-- <view class="t_body" @click="uplaodThumb">
					<image class="reaname_thumb_upload" src="/static/shizi.jpg" ></image>
				</view> -->
			</view>	
		</view>
		<view class="reaname_item_t">
			<view class="reaname_title">
				店铺视频
			</view>
			<view class="select_imgs_public">
				<view class="select_img_public" v-if="merchInfo.vodurl&&merchInfo.vodurl!=''">
					<video :src="merchInfo.vodurl"></video>
					<text @click="deleteThumb(index,2)">×</text>
				</view>
				<view class="select_img_public" v-else @click="selectGallery(2)">
					<image class="reaname_thumb_upload" src="/static/shizi.jpg" ></image>
				</view>
			</view>
			<!-- <uni-file-picker title="店铺视频" fileMediatype="video" v-model="merchInfo.vodurl" mode="grid" :auto-upload="false" @select="upload"
				limit="1"></uni-file-picker> -->
			<view style="color:#999;font-size: 24rpx;">建议上传时长为15-30秒的横向视频。<br>如不会拍摄制作，可拍摄分段视频后，发送给门店经理制作。</view>
		</view>
		<view class="reaname_item_t">
			<view class="reaname_title">
				拍摄剪辑教学视频
			</view>
			<view class="v_list">
				<video object-fit="cover" src="https://img.jinghushi.com/audios/9/2024/03/xXf6yMqmy9p84pqCPHuA9pHX622qcq.mp4" controls="true"></video>
				<video object-fit="cover" src="https://img.jinghushi.com/audios/9/2024/03/Ty5ykwWVU5vdvDZI5aRyyYA4L7BrL6.mp4" controls="true"></video>
				<video object-fit="cover" src="https://img.jinghushi.com/audios/9/2024/03/IIoAgaAeLZhgo9fGiZ83iaGF5AoAiE.mp4" controls="true"></video>
			</view>
		</view>
		<view class="totalBtn" @click="onsumbit">提交</view>
		<uni-drawer ref="showRight" mode="left" :width="320" :mask-click="false">
			<gallery-list @changeImg="changeImg" :isMultiple="isMultiple" :uid="uid" :type="selectType"></gallery-list>
		</uni-drawer>
	</view>
</template>

<script>
	import galleryList from '@/components/galleryList.vue'
	let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : '';
	export default {
		data() {
			return {
				isCut: false,//是否裁剪
				showGallery: false,//是否显示图库
				isMultiple: false,//是否多选 
				selectType:0,//选择类型 0图片 1视频
				uid: '',
				merchInfo: {
					content: '',
					thumb: [],
					vodurl: ''
				},
			}
		},
		components: {
			galleryList
		},
		onLoad(options) {
			this.uid = options.uid;
			this.getmerchInfo();
		},
		methods: {
			getmerchInfo() {
				this.$axios('info/getmerchtz', "POST", 'supplier', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.merchInfo = res.data.data.info;
						if(!res.data.data.info.thumb){
							this.merchInfo.thumb = [];
						}
						// if(res.data.data.info.vodurl){
						// 	if(res.data.data.info.vodurl.includes('.')){
						// 		this.merchInfo.vodurl = {
						// 			"name": res.data.data.info.vodurl,
						// 			"extname": res.data.data.info.vodurl,
						// 			"url": res.data.data.info.vodurl,
						// 		};
						// 	}else{
						// 		this.merchInfo.vodurl = '';
						// 	}
						// }else{
						// 	this.merchInfo.vodurl = '';
						// }
						if(res.data.data.info.content){
							
						}else{
							this.merchInfo.content = '本店主营XXX、XXX、XXX等，本店内承诺品质保障、欢迎到店体验选购！可点击右下方电话预约！';
						}
					}
				})
			},
			onsumbit() {
				if (this.merchInfo.content == '') {
					this.$api.msg('请完善信息！');
					return;
				}
				// if(this.merchInfo.vodurl!==''&&this.merchInfo.vodurl.url&&this.merchInfo.vodurl.url.includes('.')){
				// 	this.merchInfo.vodurl = this.merchInfo.vodurl.url;
				// }else{
				// 	this.merchInfo.vodurl = '';
				// }
				this.merchInfo.uid=this.uid;
				this.merchInfo.thumb = this.merchInfo.thumb.filter((item)=>{
					return item && item.trim();
				})
				console.log(this.merchInfo);
				this.$axios('info/saveMerchTz', "POST", 'supplier', this.merchInfo).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('提交成功！');
						// this.getmerchInfo();
						setTimeout(()=>{
							this.$navBack();
						},1000)
					}
				})

			},
			deleteThumb(idx,type) {
				if(type==1){
					this.merchInfo.thumb.splice(idx, 1);
				}else if(type==2){
					this.merchInfo.vodurl = '';
				}
			},
			upload(e){
				var that = this;
				uni.showLoading({
					title: '上传中,请稍后'
				});
				uni.uploadFile({
					url: that.$url.state.url.uploadvod,
					filePath: e.tempFilePaths[0],
					name: 'a',
					header: {
						token: token
					},
					formData: {
						'file': 'a'
					},
					success: upres => {
						let data = JSON.parse(upres.data);
						if (data.code == 200) {
							let extname = data.data.filename.split('.')[1];
							var imgs = {
								"name": data.data.filename,
								"extname": extname,
								"url": data.data.url,
							};
							that.merchInfo.vodurl = imgs;
						} else {
							that.$api.msg(data.data)
						}
					},
					fail() {
						setTimeout(() => {
							that.$api.msg('上传失败，请重试')
						}, 100)
					},
					complete() {
						uni.hideLoading();
						console.log(that.merchInfo.qualified)
					}
				})
			},
			// 选择图片弹窗
			selectGallery(type){
				if(type==2){
					this.selectType = 1;
					this.isMultiple = false;
					uni.showActionSheet({
						itemList: ['上传视频', '门店图库'],
						success: res=> {
							if(res.tapIndex == 0){//上传图片
								this.uploadVideo();
							}else if(res.tapIndex == 1){//门店图库
								this.$refs['showRight'].open()
							}
						},
					});
				}else{
					this.selectType = 0;
					this.isMultiple = true;
					uni.showActionSheet({
						itemList: ['门店图库'],
						success: res=> {
							if(res.tapIndex == 0){//上传图片
								this.$refs['showRight'].open()
							}
						},
					});
				}
			},
			// 图库选择图片
			changeImg(arr, type){
				this.$refs['showRight'].close()
				if(arr.length>0){
					if(this.isMultiple){
						this.merchInfo.thumb = [...this.merchInfo.thumb,...arr];
					}else{
						this.merchInfo.vodurl = arr;
					}
				}
			},
			uploadVideo(e){
				var that = this;
				uni.showLoading({
					title: '上传中,请稍后'
				});
				uni.chooseVideo({
					count: 1,
					success:res=>{
						var path = res.tempFilePath;
						uni.uploadFile({
							url: that.$url.state.url.uploadvod,
							filePath: path,
							name: 'a',
							header: {
								token: uni.getStorageSync('token')
							},
							formData: {
								'file': 'a'
							},
							success: upres => {
								let data = JSON.parse(upres.data);
								if (data.code == 200) {
									that.merchInfo.vodurl = data.data.url;
								} else {
									that.$api.msg(upres.data.data)
								}
							},
							fail() {
								setTimeout(() => {
									that.$api.msg('上传失败，请重试')
								}, 100)
							},
							complete() {
								uni.hideLoading();
							}
						})
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			// 选择图片
			uplaodThumb(count) {
				uni.chooseImage({
					count: count,
					success:res=>{
						var path = res.tempFilePaths;
						path.forEach((image)=>{
							this.realUpload(image);
						})
					}
				})
			},
			// 上传服务器
			realUpload(image){
				var that = this;
				let arr = '';
				uni.showLoading({
					title: '上传中,请稍后'
				});
				uni.uploadFile({
					url: that.$url.state.url.upload,
					filePath: image,
					name: 'a',
					header: {
						token: token
					},
					formData: {
						'file': 'a'
					},
					success: upres => {
						let data = JSON.parse(upres.data);
						if (data.code == 200) {
							arr = data.data.url;
							that.merchInfo.thumb.push(arr);
							uni.hideLoading();
							that.isShow = false;
						}
					},
					fail() {
						setTimeout(() => {
							that.$api.msg('上传失败，请重试')
						}, 100)
					},
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 190rpx;
	}
	.reaname_wp {
		color: $font-color-dark;
		padding: 0 20upx;
	}

	.reaname_item {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		display: flex;
		align-items: center;
		padding: 20upx 0;
	}

	.reaname_item_t {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		padding: 20upx 0;
		.v_list{
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			video{
				width: 32%;
			}
		}
	}

	.reaname_title text {
		color: #FF0000;
		font-size: 36upx;
	}

	.reaname_textarea {
		color: $font-color-dark;
		flex: 1;
		text-align: right;
		font-size: $font-sm;
		width: 100%;
		text-align: left;
		// margin: 10upx 15upx 0;
		min-height: 35upx;
		// line-height: 35upx;
	}

	.reaname_thumb {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		margin-right: -10rpx;
	}

	.t_body {
		height: calc((100vw - 100upx) /6);
		margin: 20rpx 10rpx 0 0;
		position: relative;
		width: 23.5%;
	}

	.t_body image {
		height: 100%;
		width: 100%;
	}

	.t_body text {
		background: #999;
		border-radius: 50%;
		color: #fff;
		height: 50upx;
		line-height: 40upx;
		font-size: 40upx;
		position: absolute;
		top: -10upx;
		right: -10upx;
		text-align: center;
		width: 50upx;
		opacity: .8;
	}

	.reaname_thumb_upload {
		border: 1px #d3d3d3 solid;
		border-radius: 15upx;
	}

	.reaname_sumbit {
		background-color: $base-color;
		border-radius: 40upx;
		color: #fff;
		font-size: 30upx;
		line-height: 70upx;
		margin: 60upx auto;
		text-align: center;
		letter-spacing: 3px;
		width: 90%;
		box-shadow: 4rpx 5rpx 17rpx 7rpx #ddd;
	}

	.uni-list-cell-db {
		flex: 1;
		text-align: right;
	}

	.uni-input1 {
		color: grey;
	}
</style>